﻿﻿<!doctype html>
<html class="no-js" lang="zxx">

<head>
    <!--========= Required meta tags =========-->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!--====== CSS Here ======-->
    <link rel="stylesheet" href="{{pluResPath}}content/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{pluResPath}}content/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{pluResPath}}content/static/css/hljs.css">
    <link rel="stylesheet" href="{{pluResPath}}content/ChatGPT/style.css">

</head>

<body>
    <header class="site-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-4 my-auto">
                    <a href="#" class="site-logo">
                        <img src="{{pluResPath}}content/static/picture/openai.png" alt="LOGO">
                    </a>

                </div>
            </div>
        </div>
    </header>
    <section class="about-area pt-232">
        <div class="container">
            <div class="row justify-content-end">
                <div class="col-xl-5 col-lg-5 text-right">
                    <div class="section-heading">
                        <h2>Open AI</h2>
                        {{if cache.file != ''}}
                        <p> {{cache.file}} </p>
                        {{/if}}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-12">
                    <div class="hero-content">
                        <h4>{{senderName}}</h4>
                    </div>
                    <div class="about-content">
                        <p class="markdown_prompt"></p>
                        <span class="height-50"></span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-12">
                    <div class="hero-content">
                        <h4>ChatGPT</h4>
                    </div>
                    <div class="about-content">
                        <p class="markdown_content"></p>
                        <span class="height-50"></span>
                    </div>
                </div>
            </div>
            {{if cache.file != ''}}
            <div id="qrcode" class="row justify-content-end"></div>
            {{/if}}
        </div>
    </section>
    <!-- footer start -->
    <footer class="site-footer mt-175">
        <div class="container">
            <div class="row">
                <div class="col-md-2">
                </div>
                <div class="col-md-10 my-auto text-right">
                    <div class="copyright-text">
                        <p>Response to {{senderName}} Created By Yunzai-Bot and ChatGPT-Plugin {{version}}</a></p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- footer end -->

    <!--========= JS Here =========-->
    <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      }
    };
    </script>
    <script src="{{pluResPath}}content/static/js/jquery-2.2.4.min.js"></script>
    <script src="{{pluResPath}}content/static/js/jquery.qrcode.min.js"></script>
    <script src="{{pluResPath}}content/static/js/highlight.min.js"></script>
    <script src="{{pluResPath}}content/static/js/marked.min.js"></script>
    <script src="{{pluResPath}}content/static/js/tex-mml-chtml.js"></script>
    <script src="{{pluResPath}}content/static/js/base64.min.js"></script>
    <script src="{{pluResPath}}content/static/js/main.js"></script>
    <script src="{{pluResPath}}content/static/js/purify.min.js"></script>

    <script>
        marked.setOptions({
            renderer: new marked.Renderer(),
            gfm: true,
            tables: true,
            breaks: false,
            pedantic: false,
            sanitize: false,
            smartLists: true,
            smartypants: false,
            highlight: function (code,lang) {
                return hljs.highlightAuto(code,[lang]).value;
            }
        });
        const markdown_content = '{{@ content}}';
        const html_content = marked.parse(Base64.decode(markdown_content));
        const markdown_prompt = '{{@ prompt}}';
        const html_prompt = marked.parse(Base64.decode(markdown_prompt));

        $(".markdown_content").html(DOMPurify.sanitize(html_content));
        $(".markdown_prompt").html(DOMPurify.sanitize(html_prompt));
        jQuery('#qrcode').qrcode({width: 128,height: 128,text: "{{cache.cacheUrl}}/{{cache.file}}"});
    </script>
</body>

</html>